import React from 'react';
import { Form, Input, Button } from 'antd';
import { Modal, Space } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import address from '../address';
import 'antd/dist/antd.css'
import '../sysStyle/login.css'

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            passwd: ''
        };
    }
    login() {
        let token = '' || localStorage.getItem('token');
        let username = this.state.username;
        let passwd = this.state.passwd;
        const postData = {
            "username": username,
            "passwd": passwd,
            "token": token
        };
        fetch(address + '/pc/elogin', {
            method: 'POST',
            mode: 'cors',
            headers: {
                'authorization': token
            },
            body: JSON.stringify(postData)
        }).then(res => {
            if (res.ok) {
                Modal.success({
                    content: '登录成功',
                  });
                return res.json()
            } else {
                if (res.status === 401) {
                    Modal.error({
                        title: '登录失败',
                        content: '用户名错误',
                      });
                    throw new Error(`status: ${res.status}`)
                } else if (res.status === 402) {
                    Modal.error({
                        title: '登录失败',
                        content: '密码错误',
                      });
                    throw new Error(`status: ${res.status}`)
                }
            }
        }, err => {

        }).then(d => {
            if (d === undefined || d === '') {
                return;
            }
            localStorage.setItem('token', d.token);
            this.props.history.push('/home')
        })
            .catch(err => {
                console.log(err)
            })
    };
    handleUserNameChange = (event) => {
        this.setState({ username: event.target.value });
    }
    handlePassWordChange(event) {
        this.setState({ passwd: event.target.value });
    }
    render() {
        if (localStorage.getItem('token')) {
            this.props.history.push('/home')
        }
        return (
            <div className='loginBg'>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{
                        remember: true,
                    }}
                >
                    <p className='system-name'>乐易后台管理系统</p>
                    <Form.Item
                        name="username"
                        className="login-input-username"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your Username!',
                            },
                        ]}
                    >
                        <Input 
                        prefix={<UserOutlined className="site-form-item-icon" />} 
                        placeholder="用户名" 
                        onChange={this.handleUserNameChange}
                        />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        className="login-input-password"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your Password!',
                            },
                        ]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="密码"
                            onChange={this.handlePassWordChange.bind(this)}
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button 
                        type="primary" 
                        htmlType="submit" 
                        className="login-form-button"
                        onClick={() => {
                            (this.login());
                        }}
                        >
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }
};
export default Login;